<template>
  <div>
    <!--*******************************案卷搜索首页内容************************* -->
    <div v-if="!this.$store.getters.cartState">
      <!--********************头部搜索框********************* -->
      <div class="bg-img" v-if="showArch">
        <el-row style="padding-top:60px; padding-bottom:30px" type="flex" justify="center">
          <el-col :span="12" :offset="6">
            <el-radio v-model="radio" label="1">案卷检索</el-radio>
            <el-radio v-model="radio" label="2">目录检索</el-radio>
            <el-radio v-model="radio" label="3">全文检索</el-radio>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12" :offset="4">
            <el-form :inline="true" label-width="68px">
              <el-form-item prop="rqsdata">
                <el-input
                  v-model="rqsdata"
                  placeholder="请输入"
                  clearable
                  style="width:400px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="medium "
                  @click="handleQuery"
                >搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <!--********************案卷级********************* -->
      <ol v-loading="loading" v-if="showArch">
        <div :key="item.archivesId" v-for="(item, index) in archList">
          <el-row type="flex" justify="center">
            <el-col :span="10" :offset="2">
              <li>
                <span v-if="item.personLiable">{{item.personLiable}}的</span>
                <span v-if="item.caseFileTitle" :class="{colorRed: isCaseTitle}">{{item.caseFileTitle}}</span>
                <span v-if="item.rEngin.enginName">档案，工程名称{{item.rEngin.enginName}}，</span>
                <span v-if="item.archiveFileNum">档号{{item.archiveFileNum}}，</span>
                <span v-if="item.registNum">总登记号{{item.registNum}},</span>
                <span v-if="item.entryDate">进管日期{{item.entryDate}}，</span>
                <span v-if="item.storageTime">保管期限{{item.storageTime}}，</span>
                <span v-if="item.totalRolls">总卷数{{item.totalRolls}},</span>
                <span v-if="item.currentRolls">当前卷{{item.currentRolls}},</span>
                实体借阅状态为
                <span
                  style="color:#fa9914"
                >{{item.status == 1 ? "已借出": "未借出"}}</span>。
              </li>
            </el-col>
            <el-col :span="6">
              <el-row>
                <el-col :span="14" :offset="2">
                  <el-button
                    type="success"
                    icon="el-icon-shopping-cart-2"
                    round
                    plain
                    @click="handleAddCart(item)"
                  >加入借阅车</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </div>
        <el-empty :image-size="200" v-if="archList.length == 0" description="暂无案卷数据"></el-empty>
      </ol>
    </div>
    <!--*******************************借阅车内容************************* -->
    <div style="margin:20px" v-if="this.$store.getters.cartState">
      <el-form ref="form" :model="borrow" :rules="rulesBro" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="申请人" prop="userName">
              <el-input v-model="borrow.userName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位" prop="workUnit">
              <el-input v-model="borrow.workUnit" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="借阅人岗位" prop="postName">
              <el-input v-model="borrow.postName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="部门" prop="deptName">
              <el-input v-model="borrow.deptName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="利用目的" prop="purpose">
              <el-input type="textarea" v-model="borrow.purpose" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="借阅说明" prop="borDetail">
              <el-input type="textarea" v-model="borrow.borDetail" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="借阅方式">
              <el-checkbox v-model="check_online">电子借阅</el-checkbox>
              <el-checkbox v-model="check_offline">实体借阅</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="借阅天数" prop="dayNum">
              <el-input-number v-model="borrow.dayNum" controls-position="right" :min="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-table :data="borcartList" highlight-current-row border>
          <el-table-column label="分类号" align="center" prop="archives.archiveClassifiNum" />
          <el-table-column label="档号" align="center" prop="archives.archiveFileNum" />
          <el-table-column label="档案馆代号" align="center" prop="archives.archiveCode" />
          <el-table-column
            label="案卷题名"
            align="center"
            prop="archives.caseFileTitle"
            min-width="300px"
            show-overflow-tooltip
          />
          <el-table-column label="微缩号" align="center" prop="archives.miniatureNum" />
          <el-table-column label="项目代号" align="center" prop="archives.projectCode" />
          <el-table-column label="责任者" align="center" prop="archives.personLiable" />
          <el-table-column label="编制日期" align="center" prop="archives.compilationDate" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.compilationDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="总登记号" align="center" prop="archives.registNum" />
          <el-table-column label="存放位置" align="center" prop="archives.storagePosition" />
          <el-table-column label="编制单位" align="center" prop="archives.organization" />
          <el-table-column label="进馆日期" align="center" prop="archives.entryDate" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.entryDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="总卷数" align="center" prop="archives.totalRolls" />
          <el-table-column label="当前卷" align="center" prop="archives.currentRolls" />
          <el-table-column label="保管期限" align="center" prop="archives.storageTime" />
          <el-table-column label="移交单位" align="center" prop="archives.objStr2" />
          <el-table-column label="密级" align="center" prop="archives.secretLevel" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-tag @click="handleDelete(scope.row)" type="danger" class="point">移除</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item>
          <el-button type="primary" size="mini" @click="submit">提交</el-button>
          <el-button type="danger" size="mini" @click="close">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  listFile,
  getFile,
  delFile,
  addFile,
  updateFile
} from "@/api/system/file";
import {
  listArchives,
  getArchives,
  delArchives,
  addArchives,
  updateArchives,
  updateArchivesApply,
  updateArchivesApprove,
  updateArchivesReject
} from "@/api/system/archives";
import {
  listBorcart,
  getBorcart,
  delBorcart,
  addBorcart,
  updateBorcart
} from "@/api/system/borcart";
import { getInfo } from "@/api/login";
import {
  listBorrow,
  getBorrow,
  delBorrow,
  addBorrow,
  updateBorrow,
  updateApprove,
  updateReject
} from "@/api/system/borrow";
import { addSearch } from "@/api/system/search";

export default {
  data() {
    return {
      /***************首页案卷搜索内容********************/
      // 项目根路径
      baseUrl: process.env.VUE_APP_BASE_API,
      // 搜索请求变量
      rqsdata: null,
      // 搜索类型单选框
      radio: "1",
      // 显示案卷
      showArch: true,
      // 查询案卷级返回结果
      archList: [],
      //红色样式
      isCaseTitle: false,
      // 加载动画
      loading: false,
      rules: {},
      // 案卷查询参数
      queryParamsArch: {
        pageNum: 1,
        pageSize: 5,
        archiveClassifiNum: null,
        archiveFileNum: null,
        archiveCode: null,
        caseFileTitle: null,
        miniatureNum: null,
        projectCode: null,
        personLiable: null,
        compilationDate: null,
        registNum: null,
        storagePosition: null,
        organization: null,
        entryDate: null,
        totalRolls: null,
        currentRolls: null,
        storageTime: null,
        secretLevel: null,
        enginId: null,
        status: null,
        typeId: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null,
        objStr1: "2", // 已归档
        objStr2: null
      },
      /***************借阅车内容********************/
      // 借阅
      borrow: {
        // 申请人
        userName: null,
        // 单位
        workUnit: null,
        // 部门
        deptName: null,
        // 借阅人岗位
        postName: null,
        // 借阅说明
        borDetail: null,
        // 利用目的
        purpose: null,
        // 电子借阅。0，否，1，是
        online: null,
        // 实体借阅。0，否，1，是
        offline: null,
        // 借阅天数
        dayNum: 1
      },
      check_online: true,
      check_offline: false,
      // 借阅车表格数据
      borcartList: [],
      // 查询参数
      queryParamsCart: {
        pageNum: 1,
        pageSize: 1000,
        userId: null,
        archivesId: null
      },
      rulesBro: { 
        userName: [
          { required: true, message: "申请人不能为空", trigger: "blur" }
        ],
        workUnit: [
          { required: true, message: "单位不能为空", trigger: "blur" }
        ],  
        dayNum: [
          { required: true, message: "借阅天数不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    getInfo().then(res => {
      this.queryParamsCart.userId = res.user.userId; // 按人员ID获取借阅车数据
      this.getListCart();
    });
  },
  methods: {
    /*************************首页搜索内容***********************/
    // 搜索
    handleQuery() {
      if (this.rqsdata != null) {
        this.loading = true;
        if (this.radio === "1") {
          // 按案卷检索
          this.queryParamsArch.caseFileTitle = this.rqsdata;
          listArchives(this.queryParamsArch).then(response => {
            this.loading = false;
            this.isCaseTitle = true;
            this.archList = response.rows;
            // 循环插入搜索量数据
            for(let i in this.archList){ 
              addSearch({archivesId: this.archList[i].archivesId, typeId: this.archList[i].typeId})
            }
          });
          this.rqsdata = null;
          this.queryParamsArch.caseFileTitle = null;
        } else if (this.radio === "2") {
          this.loading = false;
          // 按文件检索
          console.log("查询全文");
        } else if (this.radio === "3") {
          this.loading = false;
          // 按全文检索
          console.log("查询全文");
        }
      }
    },
    // 加入借阅车
    handleAddCart(item) {
      addBorcart({ archivesId: item.archivesId }).then(response => {
        this.getListCart();
        this.$modal.msgSuccess("添加成功");
        const cartNum = this.$store.state.borcart.cartNum + 1;
        this.$store.commit("SET_CART_NUM", cartNum);
      });
    },
    /*************************借阅车内容***********************/
    // 提交
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (!this.check_online && !this.check_offline) {
            this.$message.error("请选择借阅方式！");
          } else if(this.borcartList.length == 0){ 
            this.$message.error("请先添加借阅车！");
          } else {
            this.borrow.borcartList = this.borcartList;
            this.borrow.online = this.check_online ? 1 : 0;
            this.borrow.offline = this.check_offline ? 1 : 0;
            addBorrow(this.borrow).then(response => {
              this.getListCart();
              this.$modal.msgSuccess("新增成功");
              this.$store.commit("SET_CART_STATE", false);
              this.$store.commit("SET_CART_NUM", 0);
            });
          }
        }
      });
    },
    // 关闭
    close() {
      this.$store.commit("SET_CART_STATE", false);
    },
    // 移除
    handleDelete(row) {
      const cartIds = row.cartId || this.ids;
      this.$modal
        .confirm('是否确认删除借阅车编号为"' + cartIds + '"的数据项？')
        .then(function() {
          return delBorcart(cartIds);
        })
        .then(() => {
          this.getListCart();
          this.$modal.msgSuccess("删除成功");
          const cartNum = this.$store.state.borcart.cartNum - 1;
          this.$store.commit("SET_CART_NUM", cartNum);
        })
        .catch(() => {});
    },
    // 获取借阅车数据
    getListCart() {
      this.loading = true;
      listBorcart(this.queryParamsCart).then(response => {
        this.borcartList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped >
.point {
  cursor: pointer;
}
.bg-img {
  height: 100%;
  background-image: url("../../../assets/images/bg-client.jpeg");
  background-size: cover;
}
.colorRed {
  color: red;
}
</style>